
<template>
    <view class="container">
      <!-- 设置内容区 -->
      <scroll-view scroll-y class="content-scroll">
        <view class="settings-content">
          
          <!-- 目标热量设置 -->
          <view class="setting-section">
            <view class="section-header">
              <text class="section-title">目标热量</text>
            </view>
            <view class="setting-item">
              <view class="item-content">
                <text class="item-label">每日目标</text>
                <view class="input-group">
                  <input 
                    class="calorie-input" 
                    type="number" 
                    v-model="targetCalories" 
                    placeholder="2000"
                    @blur="saveTargetCalories"
                  />
                  <text class="input-unit">kcal</text>
                </view>
              </view>
            </view>
          </view>

          <!-- 其他设置 -->
          <view class="setting-section">
            <view class="section-header">
              <text class="section-title">其他设置</text>
            </view>
            <view class="setting-item" @click="goToPrivacyPolicy">
              <view class="item-content">
                <text class="item-label">隐私政策</text>
                <view class="item-arrow">
                  <text class="arrow-text">></text>
                </view>
              </view>
            </view>
            <view class="setting-item" @click="goToUserAgreement">
              <view class="item-content">
                <text class="item-label">用户协议</text>
                <view class="item-arrow">
                  <text class="arrow-text">></text>
                </view>
              </view>
            </view>
            <view class="setting-item" @click="goToFeedback">
              <view class="item-content">
                <text class="item-label">举报反馈</text>
                <view class="item-arrow">
                  <text class="arrow-text">></text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        targetCalories: 2000,
        userInfo: {
          height: '',
          weight: '',
          age: '',
          gender: ''
        },
        activityLevel: 'medium'
      }
    },
    mounted() {
      this.loadSettings();
    },
    methods: {
      loadSettings() {
        const savedTarget = uni.getStorageSync('targetCalories');
        if (savedTarget) {
          this.targetCalories = savedTarget;
        }
        const savedUserInfo = uni.getStorageSync('userInfo');
        if (savedUserInfo) {
          this.userInfo = JSON.parse(savedUserInfo);
        }
        const savedActivity = uni.getStorageSync('activityLevel');
        if (savedActivity) {
          this.activityLevel = savedActivity;
        }
      },
      saveTargetCalories() {
        uni.setStorageSync('targetCalories', Number(this.targetCalories));
      },
      saveUserInfo() {
        uni.setStorageSync('userInfo', JSON.stringify(this.userInfo));
      },
      selectGender(gender) {
        this.userInfo.gender = gender;
        this.saveUserInfo();
      },
      selectActivity(level) {
        this.activityLevel = level;
        uni.setStorageSync('activityLevel', level);
      },
      goToPrivacyPolicy() {
        uni.navigateTo({ url: '/pages/yinsi' });
      },
      goToUserAgreement() {
        uni.navigateTo({ url: '/pages/xieyi' });
      },
      goToFeedback() {
        uni.navigateTo({ url: '/pages/feedback' });
      }
    }
  }
  </script>
  
  <style>
  page {
    height: 100%;
  }
  
  .container {
    height: 100%;
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
  }
  
  .cursor-pointer {
    cursor: pointer;
  }
  
  /* 顶部导航栏 */
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 32rpx;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
  }
  
  .back-btn {
    display: flex;
    align-items: center;
    gap: 8rpx;
    text-decoration: none;
  }
  
  .back-text {
    font-size: 16px;
    color: #333;
  }
  
  .header-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }
  
  .header-placeholder {
    width: 80rpx;
  }
  
  /* 内容滚动区 */
  .content-scroll {
    flex: 1;
    overflow: auto;
  }
  
  .settings-content {
    padding: 32rpx;
  }
  
  /* 设置区块 */
  .setting-section {
    background: #fff;
    border-radius: 16rpx;
    margin-bottom: 32rpx;
    overflow: hidden;
  }
  
  .section-header {
    padding: 32rpx 32rpx 24rpx;
    border-bottom: 1px solid #f8f9fa;
  }
  
  .section-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }
  
  /* 设置项 */
  .setting-item {
    padding: 32rpx;
    border-bottom: 1px solid #f8f9fa;
  }
  
  .setting-item:last-child {
    border-bottom: none;
  }
  
  .item-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .item-label {
    font-size: 16px;
    color: #333;
  }
  
  .input-group {
    display: flex;
    align-items: center;
    gap: 12rpx;
  }
  
  .calorie-input,
  .info-input {
    width: 120rpx;
    height: 64rpx;
    text-align: right;
    font-size: 16px;
    color: #333;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8rpx;
    padding: 0 16rpx;
  }
  
  .input-unit {
    font-size: 14px;
    color: #666;
    min-width: 40rpx;
  }
  
  /* 性别选择 */
  .gender-options {
    display: flex;
    gap: 16rpx;
  }
  
  .gender-option {
    padding: 12rpx 24rpx;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 20rpx;
    transition: all 0.2s ease;
  }
  
  .gender-option.active {
    background: #4CAF50;
    border-color: #4CAF50;
  }
  
  .gender-text {
    font-size: 14px;
    color: #666;
  }
  
  .gender-option.active .gender-text {
    color: #fff;
  }
  
  /* 活动水平选择 */
  .activity-options {
    padding: 0 32rpx 32rpx;
  }
  
  .activity-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx;
    margin-bottom: 16rpx;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12rpx;
    transition: all 0.2s ease;
  }
  
  .activity-option:last-child {
    margin-bottom: 0;
  }
  
  .activity-option.active {
    background: #f1f8e9;
    border-color: #4CAF50;
  }
  
  .activity-content {
    display: flex;
    flex-direction: column;
    gap: 8rpx;
  }
  
  .activity-name {
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }
  
  .activity-desc {
    font-size: 14px;
    color: #666;
  }
  
  .activity-indicator {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* 箭头样式 */
  .item-arrow {
    display: flex;
    align-items: center;
  }
  
  .arrow-text {
    font-size: 16px;
    color: #999;
    font-weight: 300;
  }
  
  .privacy-bottom{
    width: 100%;
    height: 40rpx;
    position: fixed;
    bottom: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .privacy-btn {
    color: #4CAF50;
    font-size: 16px;
    text-decoration: underline;
    cursor: pointer;
  }
  </style>
  